<template>
<div class="login-container">
    <el-form autoComplete="on" :model="user" :rules="validRules" ref="user" label-position="left" label-width="0px"
      class="card-box login-form">
      <h3 class="title"><span class="icon-logo icon-header-logo2"></span>{{ $t('UniAPM') }}</h3>
      <el-form-item prop="name">
        <span class="svg-container"><icon name="user"></icon></span>
        <el-input name="name" type="text" v-model="user.username" autoComplete="on" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container"><icon name="lock"></icon></span>
        <el-input name="password" type="password" @keyup.enter.native="loginAction" v-model="user.password" autoComplete="on"
          placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%;" :loading="logining" @click.native.prevent="loginAction">
          登录
        </el-button>
      </el-form-item>

      <el-form-item>

        <el-button  style="width:100%;"  @click.native.prevent="cas">
          使用统一身份认证登录
        </el-button>
      </el-form-item>
      <!-- <div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div> -->
      <!-- <div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div> -->
    </el-form>
    <!-- <test></test> -->
</div>
</template>

<script>
import LoginService from 'api/login'
import Cas from 'api/cas'
// import test from '../graph/test.vue'
import * as types from 'store/modules/login'
export default {
  components:{
    // test
  },
  data() {
    return {
      logining: false,
      user: {
        username: '',
        password: ''
      },
      validRules: {
        username: [{
          required: true,
          message: '请输入账号',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }]
      }
    };
  },
  methods: {
    cas(){
      Cas.login();
    },
    loginAction(ev) {
      this.$refs.user.validate((valid) => {
        var self = this;
        if (valid) {
          this.logining = true;
          var loginParams = {
            username: this.user.username,
            password: this.user.password
          };
          LoginService.userLogin(loginParams).then(function(response) {
            self.logining = false;
            if (response.data) {
              self.$store.commit(types.LOGIN_SUCCESS, response.data);
              self.$router.push({path: '/home'});
            } else {
              self.logining = false;
              self.$message({
                message:"用户名和密码不对，请重新输入",
                type:"info"
              });
              self.$store.commit(types.USERINFO_FAILURE, "用户名和密码不对，请重新输入");
            }
          }).catch(function(error) {
            console.log(error);
            self.logining = false;
            self.$message({
              message:"用户名和密码不对，请重新输入",
              type:"info"
            });
            self.$store.commit(types.USERINFO_FAILURE, "用户名和密码不对");
          });
        }
      });
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "../../assets/sass/mixin.scss";
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 5px;
  }

  .login-container {
    @include relative;
    height: 100vh;
    background-color: #2d3a4b;
    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
      -webkit-text-fill-color: #fff !important;
    }
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: #eeeeee;
      height: 47px;
    }
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;
    }
    .svg-container {
      padding: 6px 5px 6px 15px;
      color: #889aa4;
    }
    .title {
      font-size: 26px;
      font-weight: 400;
      color: #eeeeee;
      margin: 0px auto 8px auto;
      text-align: center;
      font-weight: bold;
    }
    .login-form {
      position: absolute;
      left: 0;
      right: 0;
      width: 450px;
      padding: 35px 35px 15px 35px;
      margin: 120px auto;
    }
    .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }
    .forget-pwd {
      color: #fff;
    }

    .icon-logo {
      width: 50px;
      height: 50px;
      vertical-align: middle;
    }

    .icon-header-logo2 {
        /* background: url("../img/eagle.png") no-repeat scroll 0 0; */
        background: url("../../assets/img/dglglogo.png") no-repeat scroll 0 0;
        background-size: 40px 40px;
        /* margin: 5px; */
        display: inline-block;
    }
  }
</style>
